<template>
    <div v-if="DetailContent">
        <div class="part clear" >
            <p>基础信息</p>
            <div class="highlight">
                <div class="highlight-item">人物评分：1234</div>
            </div>
            <ul>
                <li>
                    <span class="txt">等级：</span>
                    <span >{{DetailContent.level}}</span>
                </li>
                <li>
                    <span class="txt">昵称：</span>
                    <span> {{DetailContent.nickname}}</span>
                </li>
                <li>
                    <span class="txt">门派：</span>
                    <span >{{DetailContent.united}}</span>
                </li>
                <li>
                    <span class="txt">造型：</span>
                    <span >{{DetailContent.type}}</span>
                </li>
                <li>
                    <span class="txt">综合实力：</span>
                    <span >{{DetailContent.score_total}}</span>
                </li>
                <li>
                    <span class="txt">宠物评分：</span>
                    <span >{{DetailContent.score_pet}}</span>
                </li>
                <li>
                    <span class="txt">人物评分：</span>
                    <span >{{DetailContent.score_role}}</span>
                </li>
                <li>
                    <span class="txt">装备评分：</span>
                    <span >{{DetailContent.score_equip}}</span>
                </li>
            </ul>
        </div>
        <div class="part clear">
            <p>角色状态</p>
            <div class="highlight" v-show="DetailContent.exp_total>=100000000">
                <div class="highlight-item">总经验{{toTranslate(DetailContent.exp_total)}}亿</div>
            </div>
            <ul>
                <li>
                    <span class="txt">仙玉数：</span>
                    <span >{{DetailContent.xianyu}}</span>
                </li>
                <li>
                    <span class="txt">银币数：</span>
                    <span >{{DetailContent.silver}}</span>
                </li>
                <li>
                    <span class="txt">总金币数：</span>
                    <span >{{DetailContent.gold}}（成交后将冻结：{{DetailContent.frozen_gold}}）</span>
                </li>
                <li>
                    <span class="txt">双倍点数：</span>
                    <span >{{DetailContent.doule_point}}</span>
                </li>
                <li>
                    <span class="txt">当前经验：</span>
                    <span >{{DetailContent.exp_now}}</span>
                </li>
                <li>
                    <span class="txt">总经验：</span>
                    <span >{{DetailContent.exp_total}}</span>
                </li>
                <li>
                    <span class="txt">气血储备：</span>
                    <span >{{DetailContent.reserve_blood}}</span>
                </li>
                <li>
                    <span class="txt">魔法储备：</span>
                    <span >{{DetailContent.reserve_magic}}</span>
                </li>
                <li>
                    <span class="txt">门派贡献：</span>
                    <span >{{DetailContent.united_point}}</span>
                </li>
                <li>
                    <span class="txt">帮派贡献：</span>
                    <span >{{DetailContent.gang_point}}</span>
                </li>
                <li>
                    <span class="txt">月饼粽子食用量：</span>
                    <span >{{DetailContent.mooncake_dumpling_total}}</span>
                </li>
            </ul>
        </div>
        <div class="part clear">
            <p>基础属性</p>
            <ul>
                <li>
                    <span class="txt">气血上限：</span>
                    <span >{{DetailContent.blood_max}}</span>
                </li>
                <li>
                    <span class="txt">魔法上限：</span>
                    <span >{{DetailContent.magic_max}}</span>
                </li>
                <li>
                    <span class="txt">物理伤害：</span>
                    <span >{{DetailContent.physical_damage}}</span>
                </li>
                <li>
                    <span class="txt">物理防御：</span>
                    <span >{{DetailContent.physical_defense}}</span>
                </li>
                <li>
                    <span class="txt">法术伤害：</span>
                    <span >{{DetailContent.magic_damage}}</span>
                </li>
                <li>
                    <span class="txt">法术防御：</span>
                    <span >{{DetailContent.magic_defense}}</span>
                </li>
                <li>
                    <span class="txt">速度：</span>
                    <span >{{DetailContent.speed}}</span>
                </li>
                <li>
                    <span class="txt">治疗强度：</span>
                    <span >{{DetailContent.treatment}}</span>
                </li>
                <li>
                    <span class="txt">物理暴击：</span>
                    <span >{{DetailContent.physical_crit}}</span>
                </li>
                <li>
                    <span class="txt">物理抗暴：</span>
                    <span >{{DetailContent.physical_uncrit}}</span>
                </li>
                <li>
                    <span class="txt">法术暴击：</span>
                    <span >{{DetailContent.magic_crit}}</span>
                </li>
                <li>
                    <span class="txt">法术抗暴：</span>
                    <span >{{DetailContent.magic_uncrit}}</span>
                </li>
                <li>
                    <span class="txt">封印命中：</span>
                    <span >{{DetailContent.seal}}</span>
                </li>
                <li>
                    <span class="txt">抵抗封印：</span>
                    <span >{{DetailContent.unseal}}</span>
                </li>
            </ul>
        </div>
        <div class="part clear">
            <p>当前加点方案</p>
            <ul>
                <li>
                    <span class="txt">体质：</span>
                    <span >{{DetailContent.physical_point}}</span>
                </li>
                <li>
                    <span class="txt">魔力：</span>
                    <span >{{DetailContent.magic_point}}</span>
                </li>
                <li>
                    <span class="txt">力量：</span>
                    <span >{{DetailContent.power_point}}</span>
                </li>
                <li>
                    <span class="txt">耐力：</span>
                    <span >{{DetailContent.endurance_point}}</span>
                </li>
                <li>
                    <span class="txt">敏捷：</span>
                    <span >{{DetailContent.agile_point}}</span>
                </li>
            </ul>
        </div>
        <div class="part clear">
            <p>永久助战</p>
            <span>{{DetailContent.assistant}}</span>          
        </div>
        <div class="part clear">
            <p>社交</p>
            <ul>
                <li>
                    <span class="txt">帮派：</span>
                    <span >{{DetailContent.gang_name}}</span>
                </li>
                <li>
                    <span class="txt">帮派职位：</span>
                    <span >{{DetailContent.gang_position}}</span>
                </li>
                <li>
                    <span class="txt">婚否：</span>
                    <span v-show="DetailContent.is_marrieds==0">未婚</span>
                    <span v-show="DetailContent.is_marrieds==1">已婚</span>
                </li>
            </ul>
        </div>
        <div class="part clear">
            <p>成就</p>
            <div class="highlight" v-show="DetailContent.achievement_point>=2000">
                <div class="highlight-item">成就点数：{{DetailContent.achievement_point}}</div>
            </div>
            <ul>
                <li class="full">
                    <span class="txt">成就点数：</span>
                    <span >{{DetailContent.achievement_point}}</span>
                </li>
            </ul>
             <span class="txt">称谓：</span>
            <span  class="val">{{DetailContent.the_title}}
            </span>
        </div>
    </div>
</template>
<script>
import axios from "axios";
export default {
    data(){
        return{
            DetailContent:{}
        }
    },
     mounted(){
     var id =this.$route.query.id   
     axios.get("http://81.68.253.206:8081/page/getAttributes?id="+id
    ).then(res=>{
      if(res.data&&res.data.data&&res.data.status){
        this.DetailContent=res.data.data;
      }
    })
   },
   methods:{
       toTranslate(a){
           return (a/100000000).toFixed(2)
       }
   }
}
</script>
<style lang="scss" scoped>
.part{
    position: relative;
    width: 100%;
    padding:rem(10) rem(30);
    background-color: #fff;
    margin-bottom: rem(13);
    span{
        font-size: rem(40);
        line-height: rem(80);
    }

    p{
        height: rem(50);
        line-height: rem(50);
        font-size: rem(40);
        font-weight: 700;;
        margin-left: rem(30);
        margin-bottom: rem(20);;
    }
    p::before{
        content: '';
        overflow: hidden;
        position: absolute;
        top: rem(55);
        left: rem(30);
        width: rem(8);
        height: rem(40);
        line-height: rem(40);
        background-color:#e74e4b;
    }
    ul{
        width: 100%;
        position: relative;
        li{
            width: 50%;
            float: left;
            height: rem(80);
            line-height: rem(80);
            font-size: rem(40);
            .txt{
                color: #888;
            }

        }
        .full{
            width: 100%;
            float: left;
            height: rem(80);
            line-height: rem(80);
            font-size: rem(40);
        }
        

    }
    .txt{
        color: #888;
    }
    .highlight{
    width: 100%;
    height: rem(60);
    line-height: rem(60);
    .highlight-item{
        display: inline-block;
        padding: 0 rem(15);
        font-size: rem(35);
        color: #ee8381;
        border: 1px solid #f7c9c9;
        border-radius: rem(10);
         margin-right: rem(20);
    }
    }
}
.clear{clear:both;}

</style>